<template>
  <div class="wrapper">
    <span
      class="item"
      :class="value === i ? 'active' : ''"
      v-for="(item, i) in navList"
      :key="item.id"
      @click="tabClick(i)"
    >
      {{ item.name }}
    </span>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      navList: [
        {
          id: 1,
          name: '奉贤区',
        },
        {
          id: 2,
          name: '松江区',
        },
        {
          id: 3,
          name: '浦东区',
        },
      ],
    }
  },
  methods: {
    tabClick(i) {
      this.$emit('input', i)
    },
  },
}
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
}
.item {
  color: #fff;
  padding: 5px;
  margin: 5px;
  background: lightcoral;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active {
  background: red;
  color: gold;
}
</style>
